<template>
  <div class="page-container project-list-container">
    <el-table :data="projectData.result.rows" border style="width: 100%">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="name" align="center">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="项目描述" prop="description" align="center">
        <template #default="scope">
          {{ JSON.parse(scope.row.description).join(" , ") }}
        </template>
      </el-table-column>
      <el-table-column label="预览图" width="200" prop="description" align="center">
        <template #default="scope">
          <el-image
            style="width: 150px; height: 150px"
            :src="scope.row.thumb"
            fit="fill"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" prop="description" align="center">
        <template #default="scope">
          <div class="edit">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              :open-delay="300"
              placement="top"
              :hide-after="500"
            >
              <el-button
                size="large"
                @click="handleEditProject(scope.row)"
                type="primary"
                :icon="Edit"
                circle
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              :open-delay="300"
              placement="top"
              :hide-after="500"
            >
              <el-button
                @click="handleDelete(scope.row.id)"
                size="large"
                type="danger"
                :icon="Delete"
                circle
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="github链接"
              :open-delay="300"
              placement="top"
              :hide-after="500"
            >
              <span class="github" @click="handlOpenGithub(scope.row.github)"
                ><OtherIcon name="icon-github-fill"
              /></span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      v-model="OpenProject"
      title="请编辑该项目的信息"
      direction="rtl"
      class="project-drawer"
      size="45%"
    >
      <div class="form-container">
        <div class="form-item">
          <div class="title">项目名称：</div>
          <el-input v-model="projectDetail.name"></el-input>
        </div>
        <div class="form-item">
          <div class="title">项目描述：(每一项描述以英文逗号为分割)</div>
          <el-input v-model="projectDetail.description"></el-input>
        </div>
        <div class="form-item">
          <div class="title">项目链接：</div>
          <el-input v-model="projectDetail.url"></el-input>
        </div>
        <div class="form-item">
          <div class="title">Github地址：</div>
          <el-input v-model="projectDetail.github"></el-input>
        </div>
        <div class="form-item">
          <div class="title">预览图：</div>
          <Upload :image-url="projectDetail.thumb" :change-image-url="handleImage" />
        </div>
        <div class="form-item">
          <div class="title">排序等级:</div>
          <el-select
            v-model="projectDetail.order"
            class="m-2"
            placeholder="排序等级"
            size="large"
          >
            <el-option
              v-for="item in initOrder"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="form-item formBtn">
          <el-button
            type="primary"
            :loading="isLoading"
            size="large"
            @click="handleUpdateProject"
            >确定</el-button
          >
          <el-button size="large" @click="handleCancel(false)">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { IProjectObj, getProject, updateProject, deleteProject } from "@/api/project";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, onBeforeMount, ref } from "vue";
import { Edit, Delete } from "@element-plus/icons-vue";
import OtherIcon from "@/components/OtherIcon.vue";
import Upload from "@/components/Upload.vue";

const isLoading = ref<boolean>(false);

// project约束
interface IProjectData {
  result: {
    rows: IProjectObj[];
    total: number;
  };
}

// 初始化order的内容
const initOrder = [1, 2, 3, 4, 5];

// 项目数据
const projectData = reactive<IProjectData>({
  result: {
    rows: [],
    total: 0,
  },
});

// 修改详情
const projectDetail = reactive<IProjectObj>({
  description: [],
  name: "",
  url: "",
  github: "",
  thumb: "",
  order: 1,
  id: "",
});

const OpenProject = ref<boolean>(false);

// 数据请求
async function fetchData() {
  isLoading.value = true;
  const res = await getProject();
  isLoading.value = false;
  if (res.code === 0) {
    projectData.result = res.data;
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
  handleCancel(false);
}

//打开github地址
function handlOpenGithub(github: string) {
  window.open(github);
}

// 取消
function handleCancel(val: boolean) {
  OpenProject.value = val;
}

// 点击删除
async function handleDelete(id: string) {
  ElMessageBox.confirm("确认删除该项目吗?", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deleteProject(id);
    fetchData();
    ElMessage({
      type: "success",
      message: res.msg || "删除项目成功！",
    });
  });
}

// 编辑
function handleEditProject(row: IProjectObj) {
  console.log(row);
  handleCancel(true);
  for (const key in projectDetail) {
    projectDetail[key] = row[key];
  }
}

// 修改预览图
function handleImage(url: string) {
  projectDetail.thumb = url;
}

async function handleUpdateProject() {
  const res = await updateProject(projectDetail.id, { ...projectDetail });
  if (res.code === 0) {
    fetchData();
    ElMessage({
      type: "success",
      message: "更新数据成功！",
    });
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
}

onBeforeMount(() => {
  fetchData();
});
</script>

<style lang="less" scoped>
.edit {
  display: flex;
  align-items: center;
  justify-content: space-around;
  .github {
    display: inline-block;
    width: 37px;
    cursor: pointer;
    height: 37px;
    text-align: center;
    line-height: 37px;
    border-radius: 50%;
    background-color: #a3a3a3;
    border: 1px solid #a3a3a3;
    color: #fff;
  }
}

.form-container {
  margin-top: -25px;
  .form-item {
    .title {
      margin: 20px 0;
      font-size: 17px;
      color: #666;
      font-weight: bold;
    }
    &.formBtn {
      display: flex;
      align-items: center;
      justify-content: end;
      margin-top: 30px;
    }
  }
}
</style>
